//     供应商分析
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, DatePicker } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState } from 'react';
import './index.css'
import axios from '../../../../utils/axios'
interface DataType {
  supId: string;  //序号
  supNumber: string;  //供应商代码
  supAbbreviations: string;  //供应商
  qualified: string;//合格
  generally: string;//让步接受
  returned: string;//退货
  review: string;//评审
  total: string;//总批数
  passRate: string;//合格率
  returnRate: string//退货率
}
const { RangePicker } = DatePicker;
const VendorAnalysis: FC = () => {
  const [dataList, setDataList] = useState([])
  // 查询和重置按钮
  const TheQuery = () => {
    console.log(123);
  }
  const reset = () => {
    console.log(333);
  }
  // 导出
  const showModal = () => { };
  // --------------------
  const [form] = Form.useForm();
  //table表格数据
  axios({
    url: "/api3/material/materialAnalysis/selectSupplierQualified",
  })
    .then((data) => setDataList(data.data.data.ListSupplierQualified))
    .catch((error) => console.log(error));
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'supId',
      key: 'supId'
    },
    {
      title: '供应商代码',
      dataIndex: 'supNumber',
      align: 'center',
      key: 'supNumber'
    },
    {
      title: '供应商',
      dataIndex: 'supAbbreviations',
      align: 'center',
      key: 'supAbbreviations'
    },
    {
      title: '合格',
      dataIndex: 'qualified',
      key: 'materialId'
    },
    {
      title: '让步接受',
      dataIndex: 'generally',
      key: 'generally'
    },
    {
      title: '退货',
      dataIndex: 'returned',
      key: 'returned'
    },
    {
      title: '评审',
      dataIndex: 'review',
      key: 'review'
    },
    {
      title: '总批数',
      dataIndex: 'total',
      key: 'total'
    },
    {
      title: '合格率',
      dataIndex: 'passRate',
      key: 'passRate'
    },
    {
      title: '退货率',
      dataIndex: 'returnRate',
      key: 'returnRate'
    }
  ];

  const data: DataType[] = [
    // {
    //   key: '1',
    //   SupplierCode: '10110',
    //   supplier: '供应商12',
    //   qualified: "111",
    //   Concessions: '2',
    //   Return: '1',
    //   review: '1',
    //   totalNumber: '1',
    //   Percent: '97.2%',
    //   ReturnRate: '0.52%'
    // },
    // {
    //   key: '2',
    //   SupplierCode: '10110',
    //   supplier: '供应商13',
    //   qualified: '222',
    //   Concessions: '2',
    //   Return: '2',
    //   review: '1',
    //   totalNumber: '3',
    //   Percent: '98%',
    //   ReturnRate: '0.22%'
    // },
    // {
    //   key: '3',
    //   SupplierCode: '10110',
    //   supplier: '供应商14',
    //   qualified: '345',
    //   Concessions: '4',
    //   Return: '4',
    //   review: '1',
    //   totalNumber: '1',
    //   Percent: '99%',
    //   ReturnRate: '0.00%'
    // },
  ];


  const { TextArea } = Input
  return (<div>
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >时间：<RangePicker /></Form.Item>
      <Form.Item >供应商简称:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={TheQuery}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={reset}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.3rem' }} type="primary" onClick={showModal}>+导出</Button></div>
    <Table
      columns={columns}
      bordered
      dataSource={dataList}
      rowKey={(record) => record.supId}
    />
  </div>

  );
};

export default VendorAnalysis